<template>
  <div class="auth-list-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">授权列表</h1>
    </div>

    <!-- 搜索栏和操作按钮 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-6 mb-6">
      <div class="flex items-center justify-between mb-4">
        <el-input
          v-model="searchText"
          placeholder="搜索用户名称/所属单位/电话号码"
          class="w-96"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search text-neutral-400"></i>
          </template>
        </el-input>

        <el-button color="#1890ff" plain class="!border-primary-500 !text-primary-500 hover:!bg-primary-50">
          <i class="fas fa-user mr-2"></i>个人空间
        </el-button>
      </div>

      <!-- 状态筛选按钮 -->
      <div class="flex gap-3">
        <el-button 
          :type="statusFilter === '待审批' ? 'primary' : ''" 
          @click="statusFilter = '待审批'"
        >
          待审批
        </el-button>
        <el-button 
          :type="statusFilter === '审批通过' ? 'primary' : ''" 
          @click="statusFilter = '审批通过'"
        >
          审批通过
        </el-button>
        <el-button 
          :type="statusFilter === '审批驳回' ? 'primary' : ''" 
          @click="statusFilter = '审批驳回'"
        >
          审批驳回
        </el-button>
        <el-button 
          :type="statusFilter === '已激活' ? 'primary' : ''" 
          @click="statusFilter = '已激活'"
        >
          已激活
        </el-button>
        <el-button 
          :type="statusFilter === '待激活' ? 'primary' : ''" 
          @click="statusFilter = '待激活'"
        >
          待激活
        </el-button>
      </div>
    </div>

    <!-- 授权表格 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm overflow-hidden">
      <el-table
        :data="filteredAuths"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '500' }"
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="permissionId" label="许可证id" width="120" align="center" />
        <el-table-column prop="event" label="申请事件" width="140" />
        <el-table-column prop="username" label="用户名称" width="120" />
        <el-table-column prop="role" label="用户角色" width="120" />
        <el-table-column prop="phone" label="电话号码" width="140" />
        <el-table-column prop="department" label="所属单位" width="120" />
        <el-table-column prop="deviceId" label="设备标识" width="120" />
        <el-table-column prop="approver" label="审批人" width="100" />
        <el-table-column prop="status" label="审批状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approveTime" label="审批时间" width="180" />
        <el-table-column label="操作" width="300" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handlePass(row)">
              通过
            </el-button>
            <el-button type="danger" size="small" @click="handleReject(row)">
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-between items-center py-4 px-6 border-t border-neutral-200 dark:border-neutral-700">
        <el-button type="primary" @click="batchDelete">
          <i class="fas fa-trash mr-2"></i>批量删除
        </el-button>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, sizes"
          :total="auths.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchText = ref('')
const statusFilter = ref('待审批')
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟授权数据
const auths = ref([
  { id: 1, permissionId: 111, event: '在线激活', username: '是是是', role: '管理员', phone: '13366664444', department: 'jrlc', deviceId: 'xxx', approver: '张三', status: '审批通过', approveTime: '2023-10-05 14:32:35' },
  { id: 2, permissionId: 222, event: '离线激活', username: '对对对', role: '审核员', phone: '13366664444', department: 'jrlc', deviceId: 'xxx', approver: '', status: '待审批', approveTime: '' },
  { id: 3, permissionId: 333, event: '设备迁移', username: '啊啊啊', role: '普通用户', phone: '13366664444', department: 'jrlc', deviceId: 'xxx', approver: '张三', status: '审批驳回', approveTime: '2023-10-05 14:32:35' }
])

const filteredAuths = computed(() => {
  let result = auths.value
  if (statusFilter.value) {
    result = result.filter(auth => auth.status === statusFilter.value)
  }
  if (searchText.value) {
    result = result.filter(auth => 
      auth.username.includes(searchText.value) ||
      auth.department.includes(searchText.value) ||
      auth.phone.includes(searchText.value)
    )
  }
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})

const getStatusType = (status) => {
  const statusTypes = {
    '待审批': 'warning',
    '审批通过': 'success',
    '审批驳回': 'danger',
    '已激活': 'success',
    '待激活': 'info'
  }
  return statusTypes[status] || ''
}

const handlePass = (row) => {
  ElMessageBox.confirm(`确定通过 "${row.username}" 的授权申请吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  }).then(() => {
    row.status = '审批通过'
    row.approver = '张三'
    row.approveTime = new Date().toLocaleString('zh-CN')
    ElMessage.success('审批通过')
  }).catch(() => {})
}

const handleReject = (row) => {
  ElMessageBox.confirm(`确定驳回 "${row.username}" 的授权申请吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = '审批驳回'
    row.approver = '张三'
    row.approveTime = new Date().toLocaleString('zh-CN')
    ElMessage.success('审批驳回')
  }).catch(() => {})
}

const batchDelete = () => {
  ElMessage.info('批量删除功能')
}
</script>

<style scoped>
.auth-list-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

